<template>
    <div class="frame">
        <div>
            <el-menu class="menu" default-active="0">
                <template v-for="(item, idx) in menus">
                    <el-menu-item :index="idx">
                        <span class="menu-item" @click="goto(item)">{{ item.meta.title }}</span>
                    </el-menu-item>
                </template>
                <div class="flex-grow"></div>
                <el-menu-item :index="-1">
                    <span @click="logout">退出登录</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>

</template>

<script setup>
import router from "@/router";
import { menus } from "@/router/index";

const goto = (item) => {
    router.push({ name: item.name })
}

const logout = () => {
    localStorage.clear()
    router.go(0)
}
</script>

<style scoped>
.frame {
    display: flex;
    flex-direction: row;
}

.menu {
    width: 160px;
    height: 100vh;
    padding-top: 3vh;
    display: flex;
    flex-direction: column;
    position:fixed;
}

.menu-item {
    width: 100%;
}

.content {
    padding: 20px;
    flex: 1;
    margin-left:170px;
}
</style>
